<template>
  <div class="review-list-container">
    <div class="review-list">
      <ReviewItem
        v-for="review in reviews"
        :key="review.id"
        :review="review"
      />
    </div>
  </div>
</template>

<script lang="ts">
import ReviewItem from './ReviewItem.vue';
import type {Review} from '../../utility/interfaces';

export default {
  props: ["reviews"],
  components: { ReviewItem },
};
</script>

<style scoped>
.review-list-container {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-sizing: border-box;
}

.review-list {
  max-height: 500px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-right: 1rem;
}

/* Custom scrollbar styling */
.review-list::-webkit-scrollbar {
  width: 8px;
}

.review-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.review-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  transition: background 0.3s ease;
}

.review-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

@media (max-width: 768px) {
  .review-list {
    max-height: 400px;
  }
}
</style>
